<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--兼容IE-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>新闻列表向上滚动放大显示动画效果</title>
    <link rel="stylesheet" type="text/css" href="css/roll.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div class="news-scroll">
  <ul class="roll">
      <li class="roll_1"><a href=""><e>2017-12-28</e><p>装配式发展如火如荼，我们为您整理了2017年关于装配式不可不知的几件事11.</p></a></li>
      <li class="roll_2"><a href=""><e>2018-12-28</e><p>装配式发展如火如荼，我们为您整理了2018年关于装配式不可不知的几件事.</p></a></li>
      <li class="roll_3"><a href=""><e>2019-12-28</e><p>装配式发展如火如荼，我们为您整理了2019年关于装配式不可不知的几件事.</p></a></li>
      <li class="roll_4"><a href=""><e>2020-12-28</e><p>装配式发展如火如荼，我们为您整理了2020年关于装配式不可不知的几件事.</p></a></li>
      <li class="roll_5"><a href=""><e>2021-12-28</e><p>装配式发展如火如荼，我们为您整理了2021年关于装配式不可不知的几件事.</p></a></li>
  </ul>
  <script>
    $(function () {
        /*消息滚动*/
        var $ul = $('.roll');
        var timeID;
        function roll() {
            clearInterval(timeID);
            timeID = setInterval(function () {
                clearInterval(timeID);
                $ul.animate({ top: "0px" }, 1000, function () {
                    $ul.find("li:first").removeClass().addClass('roll_hide').appendTo($ul);

                    for(var i=0;i<5;i++){
                        $ul.find("li").eq(i).removeClass().addClass('roll_'+ (i+1) +'')
                    }
                    roll()
                })
            }, 1000);
        }
        roll()
    })
  </script>
</div>
</body>
</html>